<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地图下钻</title>
    <style>
        body {
            margin: 0 auto;
        }

        #main {
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }
    </style>
</head>

<body>
    <div id="main"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.7.0/echarts.min.js"></script>
    <script>
        let publicUrl = 'https://geo.datav.aliyun.com/areas_v2/bound/';
        async function initChart() {
            let chart = echarts.init(document.getElementById('main'));
            let alladcode = await getGeoJson('all.json')
            let chinaGeoJson = await getGeoJson('100000_full.json')
            initEcharts(chinaGeoJson, '中国', chart, alladcode)
        }
        initChart();

        // 每个地区的数据
        let mapData = [{
                name: "河南省",
                value: 1000
            },
            {
                name: "山东省",
                value: 500
            },
            {
                name: "安徽省",
                value: 700
            },
            {
                name: "山西省",
                value: 200
            },
            {
                name: "湖南省",
                value: 600
            },
            {
                name: "四川省",
                value: 1600
            }
        ]

        //echarts绘图
        function initEcharts(geoJson, name, chart, alladcode) {
            //获取当前显示地图下方地市的坐标点数据； 用于气泡显示
            let geoCoordMap = {};
            // 获取地区详细信息
            let mapFeatures = geoJson.features;
            // 遍历获取每个地区的经纬度
            mapFeatures.forEach(function (v, i) {
                // 获取当前地区名
                let name = v.properties.name;
                if (name) {
                    // 获取当前地区的经纬度
                    geoCoordMap[name] = v.properties.center;
                }
            });
            //将data数据进入方法，取需要的参数； 用于气泡显示
            let convertData = function (data) {
                var res = [];
                data.forEach(item => {
                    // 获取当前省份的经纬度坐标
                    let geoCoord = geoCoordMap[item.name];
                    if (geoCoord) {
                        res.push({
                            // name 表示地区名称
                            name: item.name,
                            // value数据格式为：[113.665412, 34.757975, '200']
                            value: geoCoord.concat(item.value)
                        });
                    }
                })
                return res;
            };

            echarts.registerMap(name, geoJson);
            var option = {
                title: {
                    text: name,
                    left: 'center',
                },
                //鼠标经过展示数据方法
                tooltip: {
                    triggerOn: "mousemove",
                    formatter: function (params) {
                        if (isNaN(params.value)) {
                            params.value = 0
                        }
                        if (params.seriesName === '散点') {
                            params.value = params.data.value[2]
                        }
                        var html = '<span>' + params.name + '：</span><br/>'
                        html += '<span>值：' + params.value + '</span><br/>'
                        return html
                    },
                    backgroundColor: 'rgba(29, 38, 71)',
                    // 额外附加的阴影
                    extraCssText: 'box-shadow:0 0 4px rgba(11, 19, 43,0.8)',
                },
                geo: {
                    show: true,
                    top: '15%',
                    map: name,
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false,
                            color: "#fff",
                        }
                    },
                    roam: true,
                    itemStyle: {
                        normal: {
                            areaColor: '#116bda',
                            borderColor: '#fff',
                        },
                        emphasis: {
                            areaColor: '#113cda',
                        }
                    }
                },
                //进行气泡标点
                series: [{
                        type: 'map',
                        map: mapData,
                        geoIndex: 0,
                        aspectScale: 0.75, //长宽比
                        showLegendSymbol: false, // 存在legend时显示
                        label: {
                            normal: {
                                show: true
                            },
                            emphasis: {
                                show: false,
                                textStyle: {
                                    color: '#fff'
                                }
                            }
                        },
                        roam: true,
                        itemStyle: {
                            normal: {
                                areaColor: '#031525',
                                borderColor: '#3B5077',
                            },
                            emphasis: {
                                areaColor: '#2B91B7'
                            }
                        },
                        animation: true,
                        data: mapData
                    },
                    {
                        name: '散点', // 自定义名称
                        type: 'effectScatter', // scatter  effectScatter  
                        coordinateSystem: 'geo', // 设置坐标系类型
                        data: convertData(mapData), // 设置散点位置和数据
                        symbolSize: function (val) { // 设置散点大小
                            return 15
                        },
                        showEffectOn: 'render',
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        hoverAnimation: true, // 是否显示鼠标悬浮动画
                        label: {
                            // 静态显示时的样式
                            normal: {
                                show: true, // 显示地区名称
                                formatter: function (data) { // 显示模板
                                    return data.value[2]
                                },
                                position: 'bottom', // 显示位置

                            },
                            // 鼠标悬浮上去的样式
                            emphasis: {
                                show: true, // 显示地区名称
                                color: "red",
                            },
                        },
                        itemStyle: {
                            normal: {
                                color: function (res) {
                                    let value = res.value[2]
                                    //根据value值对标点进行不同颜色显示
                                    if (value < 500) {
                                        return '#ff3859'
                                    } else if (value < 1000) {
                                        return '#4ed7fa'
                                    } else if (value < 1500) {
                                        return '#fac531'
                                    } else {
                                        return '#01ff5b'
                                    }
                                },
                                shadowBlur: 10,
                            },
                            // 鼠标悬浮上去的样式
                            emphasis: {
                                color: "red",
                            },
                        },
                        zlevel: 3
                    }
                ]
            };

            chart.setOption(option);
            // 解绑click事件
            chart.off("click");
            //给地图添加监听事件
            chart.on('click', async params => {
                // 获取当前点击的地图code
                let clickRegion = alladcode.find(areaJson => areaJson.name === params.name);
                // 获取要获取地图的json名称
                let regionJsonName = clickRegion.adcode + '_full.json'
                // 获取点击的区域名称
                let cityName = params.name
                // 判断当前点击的地图等级,如果是区级，则再次点击时重新回到全国的数据
                if (clickRegion.level === 'district') {
                    regionJsonName = '100000_full.json'
                    cityName = '山东省'
                }
                // 根据地图code获取
                getGeoJson(regionJsonName).then((result) => {
                    initEcharts(result, cityName, chart, alladcode)
                })
            })
        }
        //获取地图json数据
        async function getGeoJson(jsonName) {
            return await $.get(publicUrl + jsonName)
        }
    </script>
</body>

</html>